<!DOCTYPE html>
<html>

<head>
    <title>黑马顺风车</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css">
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/jquery.mobile-1.4.5.min.js"></script>
    <link rel="stylesheet" href="../css/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>

    <script>

        function getStatusColor(status) {
            switch (status) {
                case 2: return 'green'; break;
                case 1: return 'red'; break;
            }
        }
        $.ajax({
            type: "POST",
            url: "/order/api/list",
            cache: false,
            data: JSON.stringify({ role: localStorage.getItem('current_role') }),
            success: function (d) {
                for (var i in d.data) {
                    var dd = d.data[i];
                    dd.statusName = orderStatus[dd.status];
                    dd.statusColor = getStatusColor(dd.status);
                    dd.time = transDate(dd.passengerStartDate);
                    renderByTemplate('#defaultpanel', '#template', dd);
                    if (dd.status != 1) { //已支付，去掉支付连接
                        $('#defaultpanel p:last').remove();
                    }
                }
            },
            error: function () {

            }
        });


        $(function () {
            
        });


    </script>

</head>

<body>

    <div id="template" style="display: none;">
        <div data-role="content" class="ui-content ui-content2 trip-content" id="{id}" status="{status}">
            <h4 style="color:darkgoldenrod">
                出行时间：{time}
                <span style="color:{statusColor}"> &nbsp;&nbsp;{statusName}</span>
            </h4>
            <p>
                从：<span>{passengerStartAddr}</span>
                <br>
                到：<span>{passengerEndAddr}</span>
            </p>
            <p style="color:darkgoldenrod">订单金额：{cost}</p>
            <p style="text-align:right;">
                <a href="javascript:toUrl('pay.html?id={id}&tripId={passengerStrokeId}&c={cost}')"
                    style="text-decoration:none">点我支付</a>
            </p>
        </div>
    </div>

    <div data-role="page" id="pageone" class="bg-img">
        
        <div data-role="header" data-position="fixed" data-tap-toggle="false">
            <a href="javascript:changeRole()" class="ui-btn ui-btn-inline ui-corner-all">切换</a>
            <h1>乘客端 - 我的订单</h1>
        </div>
        <div style="margin-top:120px;" id="trips"></div>

        <div id="defaultpanel">
        </div>

        <div style="margin-bottom:20px;"></div>
        <div data-role="footer" data-position="fixed" data-tap-toggle="false">
            <div data-role="navbar" style="margin: 0;">
                <ul>
                    <li><a href="javascript:location.href='user.html'" data-icon="home">首页</a></li>
                    <li><a href="javascript:location.href='trip.html'" data-icon="grid">我的行程</a></li>
                    <li><a href="javascript:location.href='order.html'" data-icon="bullets"
                            class="ui-btn-active">我的订单</a></li>
                    <li><a href="javascript:location.href='../common/userCenter.html'" data-icon="user">个人中心</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>